<template>
  <div class="app-container home">
    <h3 class="tit">{{defaultSettings.title}}</h3>
    <h4 class="subtit">{{defaultSettings.subTitle}}</h4>
    <div class="cut"></div>
    <ul class="page-list">
      <li v-for="item in pageList" @click="goToPage(item)">
        <h2 >{{ item.tit }}</h2>
        <h3 ><strong >{{item.len}}</strong> <sub >条</sub></h3>
        <h4 >最近更新于 <br >{{ parseTime(item.update_at) }}</h4>
      </li>
    </ul>
  </div>
</template>

<script setup name="Index">
import defaultSettings from '@/settings'
import { getPageList } from "@/api/dudu";
const router = useRouter();
const pageList = ref([])

/** 查询页面列表 */
function getList() {
  getPageList('/sheet_stat').then(res => {
   pageList.value = res.result;
    
  });
}

function goToPage(item) {
  router.push({ path: item.path || "/" });
}

getList();
</script>

<style scoped lang="scss">
.home{
  .tit{
    text-align: center;
    font-size: 30px;
  }
  .subtit{
    text-align: center;
    font-size: 22px;
  }
  .cut{
    margin: 40px auto 0;
    width: 90%;
    height: 30px;
    border: 1px solid #999;
    border-bottom: none;
    position: relative;
    border-radius: 5px 5px 0 0;
    &::before{
      content: "";
    position: absolute;
    width: 1px;
    height: 20px;
    background: #999;
    left: 50%;
    top: -20px;
    transform: translate(-50%);
    }
  }
  .page-list{
    padding-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
    li{
      border: 1px #ccc solid;
      cursor: pointer;
      padding: 30px;
      line-height: 160%;
      border-radius: 5px;
      text-align: center;
      h2{
        margin-bottom: .5em;
        color: #264ac0;
      }
      h3{
        margin-top: 20px;
        margin-bottom: .2em;
        display: inline-block;
        position: relative;
        font-size: 80px;
        line-height: 100%;
        sub{
          line-height: 100%;
          font-size: 14px;
          position: absolute;
          right: -20px;
          bottom: 0;
          color: #666;
        }
      }
      h4{
        color: #333;
        font-size: 16px;
        line-height: 160%;
      }
    }
  }
}
</style>

